<script>
import TreeSelect from 'ant-design-vue/es/tree-select';
import Icon from 'ant-design-vue/es/icon';
import { getCommonData } from '@/api/reportCenter';
import { filterRequestData, setFatherNode } from '../common';

const { TreeNode } = TreeSelect;

const popupContainer = function(triggerNode) {
  return triggerNode.parentNode || document.body;
};

let LoadingIcon = null;

export default {
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    placeholder: {
      type: String,
      default: () => {
        return '请选择';
      }
    },
    disabled: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    selectValue: {
      type: String,
      default: () => {
        return '';
      }
    }
  },

  data() {
    return {
      loading: false
    };
  },

  inject: {
    formData: {
      from: 'formData',
      default: ''
    }
  },

  computed: {
    showLabelKey() {
      return this.item.selectViewOptions && this.item.selectViewOptions.renderKey;
    },

    valueKey() {
      return this.item.selectViewOptions && this.item.selectViewOptions.renderValue;
    },

    getFormData() {
      if (this.formData) {
        return this.formData();
      } else {
        return undefined;
      }
    },

    suffixIcon() {
      return this.loading
        ? LoadingIcon
        : undefined;
    }
  },

  methods: {
    getDataSource() {
      const { item } = this;
      if (!this.item.opintion.length) {
        this.loading = true;
        if (!item.focusUrlParams || !item.focusUrl || JSON.stringify(item.focusUrlParams) === '{}') return this.$message.error('请求参数未配置');
        const {
          focusUrlParams
        } = item;
        let endREquestPayload = focusUrlParams;
        if (this.getFormData) {
          if (focusUrlParams.other) {
            endREquestPayload = filterRequestData(focusUrlParams, this.getFormData, this.item);
          }
        }
        // if (!item.focusUrl.includes('http')) {
        //   this.$message.warning('请在后台接口配置内输入完整地址(http://10.10.10.61/....)');
        //   return;
        // }
        endREquestPayload && getCommonData(endREquestPayload, item.focusUrl).then(({ data: res }) => {
          this.loading = false;
          if (res.success) {
            setFatherNode(res.data);
            this.item.opintion = res.data;
          } else {
            this.item.opintion = [];
          }
        });
      } else {
        this.$forceUpdate();
      }
    },

    treeSelect(...args) {
      const extra = [...args][2];
      const node = extra.node;

      this.$emit('changeData', {
        data: node.$attrs.myItem,
        node,
        item: this.item
      });
    },

    treeSelectNode(h, data) {
      const {
        valueKey,
        showLabelKey
      } = this;

      return data.map(item => {
        const baseProps = {
          key: item[valueKey],
          value: item[valueKey],
          title: item[showLabelKey]
        };

        const baseAttrs = {
          myItem: item
        };

        if (item.children) {
          return h(TreeNode, {
            props: {
              ...baseProps
            },
            attrs: {
              ...baseAttrs
            }
          },
          this.treeSelectNode(h, item.children)
          );
        } else {
          return h(TreeNode, {
            props: {
              ...baseProps
            },
            attrs: {
              ...baseAttrs
            }
          });
        }
      });
    }

  },

  render(h) {
    const {
      item,
      getDataSource,
      treeSelect,
      suffixIcon,
      treeSelectNode
    } = this;

    LoadingIcon = h(Icon, {
      props: {
        type: 'loading'
      }
    });
    const SelectNode = treeSelectNode(h, item.opintion);

    const treeNode = h(TreeSelect, {
      style: {
        width: '100%'
      },

      props: {
        value: this.selectValue,
        dropdownStyle: {
          maxHeight: '400px',
          width: '100%',
          overflow: 'auto',
          zIndex: 9999999
        },
        getPopupContainer: popupContainer,
        disabled: this.disabled,
        suffixIcon,
        allowClear: true,
        showSearch: true
      },

      on: {
        focus: () => getDataSource(),
        select: (...args) => treeSelect(...args),
        change: e => {
          console.log(e);
        }
      }
    },
    SelectNode
    );

    return treeNode;
  }
};
</script>

